@use '@angular/material' as mat;

@mixin theme($theme) {
  app-homepage {
    .docs-header-background {
      background: mat.get-theme-color($theme, primary-container);
    }

    .docs-header-headline {
      color: mat.get-theme-color($theme, on-primary-container);
    }

    .docs-homepage-row,
    .docs-homepage-carousel-row h2,
    a.docs-featured-components-carousel-item,
    .docs-homepage-guides-card,
    a.docs-link:hover {
      color: mat.get-theme-color($theme, on-surface-variant);
    }

    [carousel-item]:hover,
    [carousel-item]:focus {
      outline: none;

      .docs-homepage-guides-card {
        background: mat.get-theme-color($theme, surface-dim);
      }
    }
  }
}
